<style type="text/css">
.drag{ padding: 5px; background: #f00; cursor: move; height: 200px; width: 200px; color:#fff; border: 1px outset #c0c0c0;}
.drop-ativo { background-color: #000 !important; opacity: 1.0; }
.drop-hover { background-color: white !important; outline: 1px dotted black;}
.drop{ padding: 5px; background-color: green; height: 300px; width: 300px;  color:#fff; border: 1px outset #c0c0c0;} 
</style>
<script type="text/javascript"
	src="<?=$this->publicUrl?>/scripts/jquery.ui-1.0/ui.mouse.js"></script>
	<script type="text/javascript"
	src="<?=$this->publicUrl?>/scripts/jquery.ui-1.0/ui.core.js"></script>
	<script type="text/javascript"
	src="<?=$this->publicUrl?>/scripts/jquery.ui-1.0/ui.draggable.js"></script>
		<script type="text/javascript"
	src="<?=$this->publicUrl?>/scripts/jquery.ui-1.0/ui.resizable.js"></script>
		
		<script type="text/javascript"
	src="<?=$this->publicUrl?>/scripts/jquery.ui-1.0/ui.droppable.js"></script>
		

<script type="text/javascript">
$(document).ready(function() {
	$(".drag").draggable(
	{
	preventionDistance: 20,
	
	start: function(ev) {

		$(this).css('background','#000')
			
	},
	
	distance: 100,
	
	helper: 'clone',
	
	revert: 'invalid',
	
	revertDuration: 15,
	
	scroll: true,
	
	refreshPositions: true,
	
	ScrollSensitity: 100,
	
	snap: true,
	
	opacity: 0.5,
	stop: function(ev) {
		$(this).css('background', '#f00');
	},
	
	delay: 500,
		
	drag: function(ev, pos) {
		$(".pos").html(pos.position.top + " x " + pos.position.left);
		if (pos.position.top < 0) this.destroy();
		if (pos.position.left < 0) this.stop()
	},
	
	effect: ['fade','fade']
	
	}).resizable();
	
		
	$(".drop").droppable(
	{
	accept: '.drag',
	tolerance: 'touch',
	activeClass: 'drop-ativo',
	hoverClass: 'drop-hover',
	drop: function() {
		$(this).append("<br />Dropped");
	}
		
	}
	);
	
	});
</script>
<div class="drag">

</div>



<div class="drop">

</div>


<div class="pos">oi</div>
<p>oux</p>